<template>
  <view class="sub-page">
    <u-sticky bgColor="#fff" offsetTop="0">
      <view class="tabs-box">
        <tabs
          itemStyle="padding-right: 64rpx;padding-left:0;height: 56rpx;font-size:32rpx;line-height: 48rpx;color: rgba(0,0,0,0.7);font-weight: 600;"
          lineWidth="0"
          :activeStyle="{
            color: 'rgba(0,0,0,0.9)',
            fontSize: '40rpx',
          }"
          :list="tabs"
          @change="changeType"
          :current="activeIndex"
        ></tabs>
      </view>
    </u-sticky>
    <view class="list-box" v-if="list && list.length">
      <view
        class="list"
        v-for="item in list"
        :key="item.orderId"
        @click.stop="
          toURL('/page_my/bookTickets/detail', {
            id: item.orderId,
            num: item.orderNum,
          })
        "
      >
        <view class="image-info-box">
          <image
            class="cover-img"
            :src="img_api + item.detailPageVoList[0].goodPic"
          ></image>
          <view class="bottom-box">
            <view class="left">
              <view class="bottom-text-label">活动日期</view>
              <view class="bottom-date-box">
                <text class="date"
                  >{{ item.detailPageVoList[0].showTicketDate }}
                </text>
                <text class="weeks">
                  {{ item.detailPageVoList[0].ticketDate | showWeek }}</text
                >
              </view>
            </view>
            <view class="right">
              <view class="bottom-text-label">预约门票</view>
              <view class="bottom-time-box">
                <text class="time-txt"
                  >{{ item.detailPageVoList[0].typeName }}
                </text>
                <text class="num"
                  >{{ item.detailPageVoList[0].ticketCount }}张
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="order-info-box">
          <view class="order-info" v-if="item.orderStatus == 1">
            <view class="left" @click.stop="cancelOrder(item)">
              <image
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-activity-ancel.png"
                class="icon-activity"
              ></image>
              <text class="yuyue-num">取消订单</text>
            </view>
            <view class="right">
              <text class="order-status">{{
                item.orderStatus | orderStatusFilter
              }}</text>
              <view
                class="order-status-time-box"
                @click.stop="getPayOrderInfo(item.orderId)"
              >
                <text class="pay-price">去支付 </text>
                <image
                  src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-pay.png"
                  class="icon-pay"
                ></image>
              </view>
            </view>
          </view>
          <view class="order-info" v-else-if="item.orderStatus == 2">
            <view class="left" @click.stop="callPhone(item)">
              <image
                class="icon-activity"
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-activity-service.png"
              ></image>
              <text class="yuyue-num">联系客服</text>
            </view>
            <view class="right">
              <view>
                <text class="order-status cancel">{{
                  item.orderStatus | orderStatusFilter
                }}</text>
              </view>
            </view>
          </view>
          <view class="order-info" v-else-if="item.orderStatus == 3">
            <view class="left" @click.stop="delOrder(item)">
              <image
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-activity-delete.png"
                class="icon-activity"
              ></image>
              <text class="yuyue-num">删除订单</text>
            </view>

            <view class="right">
              <view>
                <text class="order-status cancel">{{
                  item.orderStatus | orderStatusFilter
                }}</text>
              </view>
            </view>
          </view>
          <view class="order-info" v-else-if="item.orderStatus == 4">
            <view class="left" @click.stop="callPhone(item)">
              <image
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-activity-service.png"
                class="icon-activity"
              ></image>
              <text class="yuyue-num">联系客服</text>
            </view>
            <view class="right">
              <view>
                <text class="order-status">{{
                  item.orderStatus | orderStatusFilter
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <no-data v-if="list && list.length === 0" />
  </view>
</template>

<script>
import tabs from "@/components/tabs/tabs.vue";
import {
  getCancleOrder,
  getDeleteOrder,
  getlistOrderNew,
  getServerPhone,
} from "@/config/api.js";
import NoData from "@/components/noData.vue";
import { payTransactions } from "@/utils";
import dayjs from "dayjs";

const ticketOrderStatus = {
  1: "去支付",
  2: "已支付",
  3: "已取消",
  4: "已核销",
  5: "已发货",
  6: "已退款",
};
export default {
  props: ["activeId"],
  components: {
    NoData,
    tabs,
  },
  data() {
    return {
      loadAll: false,
      activeTab: "",
      activeIndex: 0,
      list: null,
      tabs: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "待付款",
          id: 1,
        },
        {
          name: "已付款",
          id: 2,
        },
        {
          name: "已核销",
          id: 4,
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  filters: {
    orderStatusFilter: function (value) {
      return ticketOrderStatus[value] || "null";
    },
    showWeek(value) {
      const wee = dayjs(value).day();
      const weeTxt = ["日", "一", "二", "三", "四", "五", "六"];
      return "周" + weeTxt[wee];
    },
  },
  onLoad() {
    this.activeIndex = Number(this.activeId) || 0;
    if (this.activeId) {
      this.activeTab = this.tabs[this.activeId].id;
    }
    this.getList();
  },
  onShow() {
    const { updateId, action } = this.urlParams;
    if (updateId && this.list.length) {
      const index = this.list.findIndex((item) => item.orderId == updateId);
      const item = this.list.find((item) => item.orderId == updateId);
      if (action === "删除") {
        this.list.splice(index, 1);
      }
      if (action === "取消") {
        item.orderStatus = "3";
        this.list.splice(index, 1, item);
      }
    }
  },
  methods: {
    getList() {
      getlistOrderNew({
        orderType: "2",
        orderStatus: this.activeTab,
        ...this.page,
      }).then((res) => {
        console.log(res);
        if (res.rows.length > 0) {
          res.rows.forEach((item) => {
            item.detailPageVoList.forEach((list) => {
              list.showTicketDate = uni.$u.timeFormat(
                list.ticketDate,
                "mm月dd日"
              );
              list.showTicketMoney = list.ticketMoney;
              /*      list.showTicketMoney = Number(`${list.ticketMoney}e-2`).toFixed(
                2
              );*/
            });
            item.showOrderTotalPrice = item.orderTotalPrice;
            /*         item.showOrderTotalPrice = Number(
              `${item.orderTotalPrice}e-2`
            ).toFixed(2);*/
          });
          this.list =
            this.page.pageNum === 1 ? res.rows : this.list.concat(res.rows);
          uni.hideLoading();
        } else {
          this.list = [];
          uni.hideLoading();
        }
      });
    },
    changeType(e) {
      this.activeTab = e.id;
      this.page.pageNum = 1;
      uni.showLoading({
        title: "加载中",
      });
      this.getList();
    },
    // 支付前获取订单详细
    getPayOrderInfo(orderId) {
      return payTransactions(orderId)
        .then(() => {
          this.toURL("/page_index/appointment/result", {
            state: 1,
            id: orderId,
          });
        })
        .catch(({ code }) => {
          this.toURL("/page_index/appointment/result", {
            state: 0,
            id: orderId,
          });
        });
    },

    //     删除订单
    delOrder(item) {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要删除该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            getDeleteOrder({
              _id: item.orderId,
            }).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: "已删除", icon: "none" });
                _this.getList();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 取消订单
    cancelOrder(item) {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要取消该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            getCancleOrder({
              _id: item.orderId,
            }).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: "已取消", icon: "none" });
                _this.getList();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 拨打电话
    callPhone(item) {
      if (this.isSubmitting) return;
      this.isSubmitting = true;
      getServerPhone({
        orderId: item.orderId,
        orderType: "2",
      }).then((res) => {
        if (res.code === 200) {
          this.toURL(res.msg, {}, { type: "phone" });
        } else {
          uni.showToast({ title: "暂无联系电话", icon: "none" });
        }
        this.isSubmitting = false;
      });
    },
  },
  onReachBottom: function () {
    if (this.list?.length < this.total) {
      this.page.pageNum = this.page.pageNum + 1;
      this._getList();
    } else {
      this.loadAll = true;
    }
  },
};
</script>

<style lang="scss">
.sub-page {
  .tabs-box {
    padding: 30rpx 32rpx 14rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  }

  .list-box {
    margin: 32rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .list {
      margin-bottom: 32rpx;
    }

    .image-info-box {
      position: relative;
    }

    .cover-img {
      display: block;
      width: 686rpx;
      height: 320rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      box-shadow: 0rpx 2rpx 6rpx -2rpx rgba(85, 68, 59, 0.2),
        0rpx 4rpx 10rpx -2rpx rgba(115, 90, 70, 0.05);
    }

    .bottom-box {
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: rgba(255, 255, 255, 0.67);
      padding: 26rpx 24rpx 16rpx;
      border-radius: 0 0 16rpx 16rpx;

      .bottom-text-label {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 34rpx;
      }

      .right .bottom-text-label {
        text-align: right;
      }

      .bottom-date-box {
        padding-top: 4rpx;

        .date {
          padding-right: 12rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
          line-height: 40rpx;
        }

        .weeks {
          background: rgba(255, 80, 0, 0.102);
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          padding: 0 4rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #ff5000;

          line-height: 32rpx;
        }
      }

      .bottom-time-box {
        padding-top: 4rpx;

        .time-txt {
          font-size: 28rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
          line-height: 40rpx;
        }

        .num {
          background: #ff5000;
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #fff201;
          line-height: 32rpx;
          padding: 0 4rpx;
          margin-left: 8rpx;
        }
      }
    }

    .order-info-box {
      box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149, 157, 165, 0.2);
      border-radius: 0 0 16rpx 16rpx;
    }

    .order-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 24rpx 16rpx;
      background: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/ticket-pay-bg.png")
        no-repeat;
      background-size: 343rpx 38rpx;
      .left {
        display: flex;
        align-items: center;
      }
      .yuyue-txt {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 34rpx;
        padding-right: 8rpx;
      }

      .yuyue-num {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 40rpx;
      }

      .right {
        display: flex;
        align-items: center;
      }

      .order-status {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 40rpx;

        &.cancel {
          color: rgba(0, 0, 0, 0.5);
        }
      }

      .order-status-time-box {
        padding-left: 24rpx;
        position: relative;
        display: flex;
        align-items: center;

        &:before {
          position: absolute;
          left: 24rpx;
          top: 11rpx;
          content: "";
          width: 0;
          height: 24rpx;
          border-right: 2rpx solid rgba(255, 113, 58, 0.5);
        }

        .order-end {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
          line-height: 40rpx;
        }

        .pay-end {
          padding-left: 24rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.3);
          line-height: 40rpx;
        }

        .icon-pay {
          margin-left: 8rpx;
          display: block;
          height: 32rpx;
          width: 32rpx;
        }

        .pay-price {
          padding-left: 24rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: #ff5000;
          line-height: 40rpx;
          padding-right: 8rpx;
        }

        .order-cancel {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.5);
          line-height: 40rpx;
          padding-left: 24rpx;
        }

        .order-no-cancel {
          font-size: 28rpx;
          font-weight: 500;
          color: #246ae2;
          line-height: 40rpx;
          padding-left: 24rpx;
        }
      }
    }
    .icon-activity {
      display: block;
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }
  }
}
</style>
